<template>
	<view class="tabbar">
		<view 
		class="tab" 
		v-for="(item,index) in tabbarList" 
		:key="index"
		@tap='navigatorTo(item.pagePath)'
		>
			<image v-if='item.pagePath === currentPage' 
			:src="item.selectedIconPath" 
			mode="">
			</image>
			<image v-else 
			:src="item.iconPath" 
			mode="">
			</image>
			<view class="text">{{item.text}}</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default{
		props:{
			currentPage:{
				type:String,
				default:'indexss'
			}
		},
		data(){
			return{
				"tabbarList": [
						{
							"pagePath": "index",
							"iconPath": "/static/image/home.png",
							"selectedIconPath": "/static/image/homeSelect.png",
							"text": "订单"
						},
						{
							"pagePath": "product",
							"iconPath": "/static/image/class.png",
							"selectedIconPath": "/static/image/classSelect.png",
							"text": "功能"
						},
						// {
						// 	"pagePath": "service",
						// 	"iconPath": "/static/image/shop.png",
						// 	"selectedIconPath": "/static/image/shopSelect.png",
						// 	"text": "服务"
						// },
						{
							"pagePath": "my",
							"iconPath": "/static/image/my.png",
							"selectedIconPath": "/static/image/mySelect.png",
							"text": "我的"
						}
					]
			}
		},
		computed: {
			...mapState({
				loginStatus: state => state.user.loginStatus,
				userInfo: state => state.user.userInfo
			})
		},
		methods:{
			navigatorTo(e){
				if(e!='index'){
					this.navigateTo({
						url:`../../pages/${e}/index`,
						animationType:"fade-in",
						animationDuration:0
					})
				}else{
					uni.redirectTo({
						url:`../../pages/${e}/index`
					})
				}
			}
		}
	}
	
</script>

<style>
	.tabbar{
		border-top: 1rpx solid #e8e7e8;
		background-color: #fff;
		z-index: 9999;
		position:fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		
	}
	.tab{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		
	}
	image{
		width: 40rpx;
		height: 40rpx;
	}
	.text{
		font-size: 24rpx;
	}
	
</style>
